How to Add a New Font to Obsidian
Following the guide in this Reddit post, as below:
- Convert the font file to CSS through this website https://hellogreg.github.io/woff2base/ or https://www.fontconverter.io/en/css-embedded-font-base64.
- Make sure the CSS font property contains
font-family: "{fontName}"
- Place the generated CSS file in Obsidian snippets folder
.obsidian/snippets
- In Obsidian Settings/Appearance
- Enable the CSS file, under CSS snippets,
- in Text Font, enter the font name placed in the CSS under
font-family
@font-face {
font-family: '{font-name}';
src: url(......)
}
While if you want to set a specific font to a specific language, you could use unicode-range
CSS property, so the font is applied to specific set of characters. For example, for Arabic language that includes every possible Arabic character:
@font-face {
font-family: '{font-name}';
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB1E-FB4F, U+FB50-FDFF, U+FE70-FEFF;
src: url(......)
}
Explanation of the Unicode Ranges
- Arabic (0600–06FF):
- This range includes the basic Arabic letters, diacritics, and some punctuation marks.
- Example characters: ا (U+0627), ب (U+0628), ت (U+062A), etc.
-
Arabic Supplement (0750–077F):
- This range includes additional Arabic letters used in various languages.
- Example characters: ٱ (U+0671), ٲ (U+0672), etc.
-
Arabic Extended-A (08A0–08FF):
- This range includes more letters used in specific Arabic dialects and languages.
-
Arabic Presentation Forms-A (FB1E–FB4F):
- This range contains ligatures and contextual forms of Arabic letters.
- Example ligatures: ﻻ (U+0644 U+0627), ﻷ (U+0644 U+0623), etc.
-
Arabic Presentation Forms-B (FB50–FDFF):
- This range includes additional ligatures and contextual forms.
-
Special Characters (FE70–FEFF):
- This range includes additional presentation forms and special characters related to Arabic script.
And you could change the Font size for this specific font by adding size-adjust
CSS property
@font-face {
font-family: '{font-name}';
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB1E-FB4F, U+FB50-FDFF, U+FE70-FEFF;
size-adjust: 120%;
src: url(......)
}